<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <title>云呼任务详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}"  media="all" />
    <link rel="stylesheet" th:href="@{/css/public.css}"  media="all" />
</head>
<body>
<div class="layui-tab layui-tab-card" style="-webkit-backface-visibility: hidden;">
    <input id="callTaskId" th:value="${callTaskMap?.id}" type="hidden"/>
    <blockquote class="layui-elem-quote quoteBox">
        <div>
            <span th:text="${callTaskMap?.taskName}" name="title"></span>
            <span class="greed-span" th:text="'进度'+${callTaskDetail==null?'0':callTaskMap?.callProgress}+'%'">进度:12%</span>
            <span class="greed-span" th:text="'接通率'+${callTaskDetail==null?'0':callTaskDetail?.connectedRate}+'%'">接通率:12%</span>

           <!-- <span class="greed-span" th:text="'接通率'+${callTaskDetail==null?''}+'%'">接通率:12%</span>-->
        </div>
        <div class="small-tip-txt">
            <div class="layui-inline" style="margin-left:10px;">
                创建人:<span style="font-size: 14px;" name="title" th:text="${callTaskMap?.createUserName}"></span>
            </div>
            <div class="layui-inline" style="margin-left:30px;">
                创建日期:<span style="font-size: 14px;" name="regData" th:text="${callTaskMap?.createTime}"></span>
            </div>
            <div class="layui-inline" style="margin-left:30px;">
                话术:<span style="font-size: 14px;" name="type" th:text="${callTaskMap?.packageName}"></span>
            </div>
        </div>
    </blockquote>

   <div class="tablemian">
        <div class="layui-tab layui-tab-card" lay-filter="editPropTabA">
            <ul class="layui-tab-title">
                <li class="layui-this" id="callStaticsTab" lay-id="callStaticsTab">外呼详情</li>
                <li id="callListTab" lay-id="callListTab">通话详情</li>
            </ul>
            <div class="layui-tab-content" style="height: auto;">
                <div class="layui-tab-item layui-show" >
                    <div style="clear:both;"></div>
                    <div class="layui-tab-item layui-show">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md12">
                                <table class="layui-table" style="text-align: center">
                                    <thead style="text-align: center">
                                    <tr>
                                        <th colspan="4">接听状况</th>
                                        <th colspan="2">通话时长</th>
                                        <th colspan="2">通话轮次</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td rowspan="1" th:text="${callTaskDetail==null?'0':callTaskDetail.connectedTimes}">1</td>
                                        <td rowspan="1" th:text="${callTaskDetail==null?'0':callTaskDetail.rejectTimes}">2</td>
                                        <td rowspan="1" th:text="${callTaskDetail==null?'0':callTaskDetail.nullTimes}">3</td>
                                        <td rowspan="1" th:text="${callTaskDetail==null?'0':callTaskDetail.closeTimes}">4</td>

                                        <td >&lt;1min</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.callTimeLengthA}+'%'">60%</td>
                                        <td >0 - 3次</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.roundTimesA}+'%'">60%</td>
                                    </tr>
                                    <tr>
                                        <td rowspan="1">已接通</td>
                                        <td rowspan="1">拒接</td>
                                        <td rowspan="1">空号</td>
                                        <td rowspan="1">关机</td>

                                        <td >1min - 5min</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.callTimeLengthB}+'%'">60%</td>
                                        <td >4 - 6次</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.roundTimesB}+'%'">30%</td>
                                    </tr>

                                    <tr>
                                        <td rowspan="1" th:text="${callTaskDetail==null?'0':callTaskDetail.stopUseTimes}">1</td>
                                        <td rowspan="1" th:text="${callTaskDetail==null?'0':callTaskDetail.onHookTimes}">2</td>
                                        <td rowspan="1" th:text="${callTaskDetail==null?'0':callTaskDetail.inUseTimes}">3</td>
                                        <td rowspan="1" th:text="${callTaskDetail==null?'0':callTaskDetail.notConnectTimes}">4</td>

                                        <td >5min - 10min</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.callTimeLengthC}+'%'">2%</td>
                                        <td >7 - 10次</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.roundTimesC}+'%'">2%</td>
                                    </tr>
                                    <tr>
                                        <td rowspan="1">停机</td>
                                        <td rowspan="1">挂机</td>
                                        <td rowspan="1">占线</td>
                                        <td rowspan="1">无法接通</td>

                                        <td>&gt;10min</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.callTimeLengthD}+'%'">8%</td>
                                        <td >10次以上</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.roundTimesD}+'%'">8%</td>
                                    </tr>
                                    </tbody>
                                </table>

                                <table class="layui-table" style="text-align: center">
                                    <thead style="text-align: center">
                                    <tr>
                                        <th colspan="4">客户等级</th>
                                        <th colspan="4">客户关键词</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>A级(较强)</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.levelA}+'%'">3%</td>
                                        <td>D级(需筛选)</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.levelD}+'%'">3%</td>
                                        <td colspan="4" rowspan="3">
                                            <div id="container" class="content clearfix">
                                                <canvas width="250" height="250" id="myCanvas">
                                                    <div th:if="${callTaskDetail!=null&&callTaskDetail.wordCount!=null}">
                                                    <ul  th:each="${callTaskDetail.wordCount}">
                                                        <li><a href="#" th:text="${word.key }+'('+${word.value}+''">户型(3次)</a></li>
                                                    </ul>
                                                    </div>
                                                    <!--假如没有关键字显示-->
                                                    <div th:if="${callTaskDetail==null||callTaskDetail.wordCount==null}">
                                                        <ul>
                                                            <li><a href="#">暂无关键字</a></li>
                                                            <li><a href="#">暂无关键字</a></li>
                                                            <li><a href="#">暂无关键字</a></li>
                                                        </ul>
                                                    </div>
                                                </canvas>
                                            </div>
                                            <!--<textarea class="layui-textarea description" disabled="true">户型(3次)  价格(10次)  车位(10次) 双合同(1次)  收楼时间(3次) 户型(3次)  价格(10次)  车位(10次) 双合同(1次)  收楼时间(3次) 户型(3次)  价格(10次)  车位(10次) 双合同(1次)  收楼时间(3次) 户型(3次)  价格(10次)  车位(10次) 双合同(1次)  收楼时间(3次)</textarea>-->
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>B级(一般)</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.levelB}+'%'">3%</td>
                                        <td >E级(需再次跟进)</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.levelE}+'%'">3%</td>
                                    </tr>
                                    <tr>
                                        <td>C级(很少)</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.levelC}+'%'">3%</td>
                                        <td >F级(无需跟进)</td>
                                        <td th:text="${callTaskDetail==null?'0':callTaskDetail.levelF}+'%'">3%</td>
                                    </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item" >
                    <div class="tablecont">
                        <table class="layui-hide" id="callListTable" lay-filter="callListTable" style="height:505px; "></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    const baseUrl = [[${#servletContext.contextPath}]];
    console.log(baseUrl);
</script>
<script type="text/javascript"   th:src="@{/js/layui/layui.js}"></script>
<script type="text/javascript"   th:src="@{/js/page/linkageCall/queryLinkageCallTaskDetail.js(v=${new java.util.Date().getTime()})}"></script>
<script type="text/javascript"   th:src="@{/js/DataTableExtend.js}"></script>
<script type="text/javascript"   th:src="@{/js/jquery-1.7.2.min.js}"></script>
<script type="text/javascript"   th:src="@{/js/page/linkageCall/jquery.tagcanvas.js}"></script>
<script type="text/javascript"   th:src="@{/js/page/utils.js}"></script>
<script type="text/html" id="barDemo">
    <div>
        <a class="layui-btn layui-btn-xs" lay-event="view">查看详情</a>
    </div>
</script>
<script type="text/javascript">
    $(document).ready(function() {
        if( !$('#myCanvas').tagcanvas({
                textColour : '#000000',
                outlineThickness : 1,
                maxSpeed : 0.03,
                depth : 0.75
            })) {
            // TagCanvas failed to load
            $('#myCanvasContainer').hide();
        }
    });
</script>
</body>
</html>